<template>
	<!-- 样式已自适应内容高度， 目前问题是拖拽后高度不对，需要研究解决 -->
	<view class="HM-drag-sort" :style="{'height': ListHeight+50+'px','background-color': listBackgroundColor}">
		<!-- 拖拽中显示的行 -->
		<view class="rowBox-shadow" id="shadowRowBox">
			<view class="hm-row-shadow move" id="shadowRow">
				<view class="modules">
					<!-- 内容  -->
					<view class="row-content">
						<view class="row">
							<!-- 四川 -->
							<view class="view-cell-bg-zy2-1" v-if="zy==1">

								<icon-index :number="Number(shadowRow.chance_lv)" :index="String('-')"
									style="position: static;"></icon-index>
								<text style="width: 84rpx; text-align: center;">{{shadowRow.chance + '%'}}</text>
								<view class="zy2-info">
									<text class="zy2-title">{{ `${shadowRow.collegeRealName}`}}</text>
									<text class="zy2-remake">{{ `${shadowRow.collegeRemark}`}}</text>
								</view>
							</view>
							<!-- 北京 -->
							<view class="view-cell-bg-zy2-1" v-if="zy==2">
								<icon-index :number="Number(shadowRow.chance_lv)" :index="String('-')"
									style="position: static;"></icon-index>
								<text style="width: 84rpx; text-align: center;">{{shadowRow.chance + '%'}}</text>
								<text
									style="font-size: 28rpx;">{{ `${shadowRow.collegeRealName}(${shadowRow.collegeEnrollCode})`}}</text>
							</view>
							<!-- 重写山东排序item布局， 适配各端 -->
							<view class="view-bg-type-3" v-else-if="zy==3">
								<view v-for="(majors,indexsub) in shadowRow.majorsInfo" :key="indexsub">
									<view class="item-left">
										<icon-index class="new-icon-index" :number="Number(shadowRow.chance_lv)"
											:index="String('-')" :posileft="10"></icon-index>
										<view class="scale item-font">
											<view class="number-text">{{majors.chance}}</view>
											<text>%</text>
										</view>
									</view>
									<view class="item-content">
										<view class="content-info">
											<text class="info-title item-font">{{majors.professionRealName}}</text>
											<text v-if="majors.remarkExt"
												class=" item-remake">{{ `${majors.remarkExt} `  }}</text>
										</view>
										<view class="content-name">
											<text
												class="content-name-title item-font">{{shadowRow.collegeRealName}}</text>
											<text
												class="item-remake content-name-remake">{{shadowRow.collegeRemark}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 拖拽图标 -->
					<view class="drag-content">
						<view class="drag-icon">
							<text class="iconfont icon-drag"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 拖拽列表 -->
		<scroll-view class="color scroll-view" :id="'scrollView_'+guid" :scroll-y="true"
			:style="{'height': ListHeight+50+'px'}" :scroll-top="scrollViewTop" @scroll="drag.scroll"
			:scroll-with-animation="scrollAnimation" :scroll-anchoring="true">
			<view class="list">
				<view v-for="(row,index) in dragList" :key="row.HMDrag_id" class="rowBox ani">
					<!-- 注意,这里的style只有在行首次渲染出来才有效,后面拖动列表,style会被wxs修改,这里的style就不会再生效了 -->


					<view class="hm-row"
						:style="{'transform': 'translate3d(0,' + (row.HMDrag_sort-index)*100 + '%,-1px)'}"
						:data-sort="row.HMDrag_sort" :data-id="row.HMDrag_id" :id="row.HMDrag_id"
						@touchmove="drag.touchmove" @touchstart="drag.touchstart" @touchend="drag.touchend">
						<view class="modules">
							<!-- 内容  -->
							<view class="row-content">
								<view class="row" style="box-sizing: border-box;"
									@tap="triggerClick(row.HMDrag_sort, row)">
									<!--  四川 -->
									<view class="view-cell-bg-zy2-1" v-if="zy==1">
										<icon-index :number="Number(row.chance_lv?row.chance_lv:'1')"
											:index="String.fromCharCode(64 + parseInt(row.HMDrag_sort + 1))"
											style="position: static;"></icon-index>
										<view style="width: 84rpx; text-align: center;">{{row.chance}}<text
												style="font-size: 18rpx;">%</text></view>
										<view class="zy2-info">
											<text class="zy2-title" style="">{{ `${row.collegeRealName}`}}</text>
											<text class="zy2-remake">{{ `${row.collegeRemark}`}}</text>
										</view>
									</view>
									<!-- 北京 -->
									<view class="view-cell-bg-zy2-1" v-else-if="zy==2">
										<icon-index :number="Number(row.chance_lv?row.chance_lv:'-')"
											:index="String(row.HMDrag_sort + 1)" style="position: static;"></icon-index>
										<view style="width: 84rpx; text-align: center;">{{row.chance}}<text
												style="font-size: 18rpx;">%</text></view>
										<text
											style="font-size: 28rpx;">{{ `${row.collegeRealName}(${row.collegeEnrollCode})`}}</text>
									</view>
									<!-- 重写山东排序item布局， 适配各端 -->
									<view class="view-bg-type-3" v-else-if="zy==3">
										<view v-for="(majors,indexsub) in row.majorsInfo" :key="indexsub">
											<view class="item-left">
												<icon-index class="new-icon-index"
													:number="Number(row.chance_lv?row.chance_lv:'-')"
													:index="String(row.HMDrag_sort + 1)" :posileft="10"></icon-index>
												<view class="scale item-font">
													<view class="number-text">{{majors.chance}}</view>
													<text>%</text>
												</view>
											</view>
											<view class="item-content">
												<view class="content-info">
													<text
														class="info-title item-font">{{majors.professionRealName}}</text>
													<text v-if="majors.remarkExt"
														class=" item-remake">{{ `${majors.remarkExt} `  }}</text>
												</view>
												<view class="content-name">
													<text
														class="content-name-title item-font">{{row.collegeRealName}}</text>
													<text
														class="item-remake content-name-remake">{{row.collegeRemark}}</text>
												</view>
											</view>
										</view>
									</view>
									<!-- </view> -->
								</view>
							</view>
							<!-- 拖拽图标 -->
							<view class="drag-content" :data-id="row.HMDrag_id" @touchstart="drag.touchstart"
								@touchmove="drag.touchmove" @touchend="drag.touchend">
								<view class="drag-icon">
									<text class="iconfont icon-drag"></text>

								</view>
							</view>
						</view>

					</view>

				</view>
				<view class="" style="height: 60px;">

				</view>
			</view>
		</scroll-view>

		<!-- 数据跳板 -->
		<view id="dataView" style="display: none !important;" :data-guid="guid" :prop="wxsDataStr"
			:change:prop="drag.receiveData">触发wxs跳板,请勿删除</view>
		<!-- #ifdef APP-VUE || H5 -->
		<view style="display: none !important;" :prop="scrollCommand" :change:prop="renderjs.runCommand">
			触发renderjs跳板,请勿删除</view>
			<!-- #endif -->

	</view>
</template>
<script src="./drag.wxs" module="drag" lang="wxs"></script>
<script module="renderjs" lang="renderjs">
	// APP or H5端 renderjs 实现拖拽中的自动滚动列表
	export default {
		data() {
			return {
				e: null,
				ScrollView: null,
			}
		},
		methods: {
			runCommand(e) {

				if (e == null) {
					return
				}
				this.e = e;
				this.getScrollView(document.getElementById('scrollView_' + this.e.guid))
				window.cancelAnimationFrame(this.AnimationFrameID);
				this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
				if (e.command == "stop") {
					window.cancelAnimationFrame(this.AnimationFrameID);
					return;
				}
			},
			Animation() {

				if (this.e.command == "stop") {
					window.cancelAnimationFrame(this.AnimationFrameID);
					return;
				}
				// 计算最大滚动高度
				let maxScrollTop = this.e.rowLength * this.e.rowHeight - this.e.ListHeight;
				if (this.e.command == "up") {
					this.ScrollView.scrollTop -= 3
				} else if (this.e.command == "down") {
					this.ScrollView.scrollTop += 3;
				}
				if (this.ScrollView.scrollTop < 0) {
					this.ScrollView.scrollTop = 0;
					window.cancelAnimationFrame(this.AnimationFrameID);
				}
				if (this.ScrollView.scrollTop > maxScrollTop) {
					this.ScrollView.scrollTop = maxScrollTop;
					window.cancelAnimationFrame(this.AnimationFrameID);
				}
				this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
			},
			getScrollView(DOM) {

				if (this.ScrollView != null) {
					return this.ScrollView;
				}
				let styleStr = DOM.getAttribute('style');

				if (DOM.className == 'uni-scroll-view' && styleStr != null && styleStr.indexOf('overflow') > -1 && styleStr
					.indexOf(
						'auto') > -1) {
					this.ScrollView = DOM;
					return DOM;
				} else {
					this.getScrollView(DOM.firstChild);
				}
			}
		}
	}
</script>
<script>
	/**  
	 * 拖拽排序组件 HM-dragSort
	 * @description 拖拽排序组件 HM-dragSort
	 * @property {ObjectArray} list = [] 列表数据,数据格式[{"name": "花呗","icon": "/static/img/1.png",}]
	 * @property {Boolean} feedbackGenerator = [true|false] 是否拖动触感反馈  
	 * @property {Boolean} longTouch = [true|false] 是否长按拖动  
	 * @property {Boolean} autoScroll = [true|false] 是否拖拽至边缘自动滚动列表  
	 * @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序 
	 * @property {Number} listHeight = 0 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度 
	 * @property {Number} rowHeight = 44 选填,行高,单位:px,默认44px
	 * @property {String} listBackgroundColor  选填,列表底色,注意是列表的底色,不是行的底色,默认#FFFFFF
	 * @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}   
	 * @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}  
	 */
	export default {
		name: 'HM-dragSort',
		data() {
			return {
				guid: "",
				isAppH5: true, //是否APPH5 无需手动配置
				shadowRow: {}, // 存放被拖拽行数据
				// 列表数据
				dragList: [],
				ListHeight: this.listHeight, // scroll-view列表高度
				rowHeight: 44,
				// 控制滑动
				scrollViewTop: 0, // 滚动条位置
				scrollCommand: null, //传递renderjs数据
				isHoldTouch: false, //是否正在拖拽
				isScrolling: false, //是否正在滚动视图
				scrollAnimation: false, //滚动动画 在微信端开启
				scrollTimer: null, //定时器-控制滚动 微信小程序端使用 实现类似requestAnimationFrame效果
				wxsDataObj: [],
				wxsDataStr: "[]"
			}
		},
		// #ifdef VUE3
		emits: ['change', 'confirm'],
		// #endif
		props: {
			//是否开启拖动震动反馈
			feedbackGenerator: {
				value: Boolean,
				default: true
			},
			// 是否开启长按拖动
			longTouch: {
				value: Boolean,
				default: false
			},
			autoScroll: {
				value: Boolean,
				default: true
			},
			longTouchTime: {
				value: Number,
				default: 300
			},
			// 列表数据
			list: {
				value: Array,
				default: []
			},
			// 行高度 默认44行高
			rowHeight: {
				value: Number,
				default: 100
			},
			// 组件高度 默认windowHeight满屏
			listHeight: {
				value: Number,
				default: 0
			},
			listBackgroundColor: {
				value: String,
				default: "#f8f8f8"
			},
			zy: {
				value: Number,
				default: 3
			}
		},
		watch: {
			longTouch(val) {

				// #ifdef VUE3
				if (!val) {
					console.error('vue3目前仅支持长按拖拽!');
				}
				// #endif

				this.pushWxsData('longTouch', val);
			},
			longTouchTime(val) {

				this.pushWxsData('longTouchTime', val);
			},
			feedbackGenerator(val) {

				this.pushWxsData('feedbackGenerator', val);
			},
			autoScroll(val) {

				this.pushWxsData('autoScroll', val);
			},
			list: {
				handler(val) {
					console.log("我监听到了list数据产生了变化");
					this.initList(); //数据变化重新初始化list
				},
				immediate: true,
				deep: true
			},
			listHeight: {
				handler(val) {
					console.log("我监听到了listHeight数据产生了变化");
					this.ListHeight = val;
					this.pushWxsData('ListHeight', this.ListHeight);
				},
				immediate: true
			},
			scrollViewTop: {
				handler(val) {
					console.log("我监听到了scrollViewTop数据产生了变化");
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
			console.log("mounted生命周期函数进行更新了");
			console.log(this.zy)
			this.guid = this.getGuid();
			console.log(this.guid);
			const res = uni.getSystemInfoSync();
			// #ifdef MP-WEIXIN
			let state = this.compareVersion(res.hostVersion, '2.14.2');
			if (state < 0) {
				console.error('当前微信基础库:' + res.hostVersion + ',HM-dragSorts组件仅支持微信基础库2.14.2+,请切换基础库!');
			}
			this.scrollAnimation = true;
			this.isAppH5 = false;
			// #endif
			if (this.listHeight == 0) {
				this.ListHeight = res.windowHeight;
				// #ifdef VUE3
				// vue3 要减去导航栏和状态栏高度
				if (res.windowHeight == res.screenHeight) {
					this.ListHeight = res.windowHeight - 45 - res.statusBarHeight;
				}
				// #endif
			}
			this.pushWxsData('isAppH5', this.isAppH5);
			this.pushWxsData('ListHeight', this.ListHeight);
			this.pushWxsData('longTouch', this.longTouch);
		},
		methods: {

			getGuid() {
				function S4() {

					return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				}
				return (S4() + S4() + "_" + S4() + "_" + S4() + "_" + S4() + "_" + S4() + S4() + S4());
			},

			initList() {
				console.log("我这里在对this.dragList进行赋值");
				let tmpList = JSON.parse(JSON.stringify(this.list));
				for (let i = 0, len = tmpList.length; i < len; i++) {
					// 组件内赋予临时id和sort
					if (!tmpList[i].hasOwnProperty('HMDrag_id')) {
						tmpList[i].HMDrag_id = 'HMDragId_' + this.getGuid();
					}
					tmpList[i].HMDrag_sort = i;
				}
				console.log(tmpList);
				if (this.dragList.length > 0) {
					setTimeout(() => {
						this.dragList.splice(0, this.dragList.length, ...tmpList);
					}, 50)
				} else {
					this.dragList = JSON.parse(JSON.stringify(tmpList));
				}
				console.log("这是我接收到的list的值克隆给tmpList", tmpList);
				console.log("对this.dragList进行赋值tmpList值，添加新的唯一字段在里面", this.dragList);
				this.pushWxsData('lastInitTime', (new Date()).valueOf());
			},
			loadShadowRow(e) {
				//  
				this.shadowRow = this.getMoveRow(e.rowSort);
			},

			//兼容微信小程序震动
			vibrate() {

				uni.vibrateShort()
			},
			// 控制自动滚动视图
			pageScroll(e) {
				console.log('滚动----', e)

				// 滚动 up-上滚动 down-下滚动
				// console.log(e);
				if (e.command == "up" || e.command == "down") {

					if (!this.isHoldTouch) {
						this.isHoldTouch = true;
						this.scrollViewTop = e.scrollTop;
					}
					if (this.isScrolling) {
						return;
					};
					this.isScrolling = true;

					if (this.isAppH5) {
						// APP端和H5端 执行renderjs的滚动
						e.ListHeight = this.ListHeight;
						e.rowHeight = this.rowHeight;
						e.rowLength = this.dragList.length;
						this.scrollCommand = e;
						console.log('拖拽', e)
						return;
					}

					// 微信小程序执行以下逻辑
					this.scrollTimer != null && clearInterval(this.scrollTimer);
					let maxHeight = this.rowHeight * this.dragList.length + 1 - this.ListHeight;
					let runTick = true;
					// 逻辑层传递到视图层需要时间，可能会出现滚动不流畅现象
					this.scrollTimer = setInterval(() => {
						if (!runTick) {
							return;
						}
						this.runScroll(e.command, maxHeight);
						runTick = false;
						this.$nextTick(function() {
							runTick = true;
						})
					}, 16.6)
				}
				// 停止滚动
				if (e.command == "stop") {

					// #ifdef APP-PLUS || H5
					// 停止指定传递到renderjs
					this.scrollCommand = e;
					// #endif
					this.isScrolling && this.stopScroll();
				}
			},
			// 微信端的滚动
			runScroll(command, maxHeight) {

				if (command == "up") {
					this.scrollViewTop -= 5
				}
				if (command == "down") {
					this.scrollViewTop += 5;
				}
				if (this.scrollViewTop < 0) {
					this.scrollViewTop = 0;
					clearInterval(this.scrollTimer);
				}
				if (this.scrollViewTop > maxHeight) {
					this.scrollViewTop = maxHeight;
					clearInterval(this.scrollTimer);
				}
			},
			//停止滚动
			stopScroll() {

				this.scrollTimer != null && clearInterval(this.scrollTimer);
				this.isScrolling = false;
				this.scrollingtop = 0;
			},
			// 
			getMoveRow(HMDrag_sort) {
				//  
				for (let i = 0, len = this.dragList.length; i < len; i++) {
					if (this.dragList[i].HMDrag_sort == HMDrag_sort) {
						return JSON.parse(JSON.stringify(this.dragList[i]));
					}
				}
			},
			// 
			triggerClick(index, row) {

				let tmpRow = JSON.parse(JSON.stringify(row));
				// 清除临时id和sort
				delete tmpRow.HMDrag_id;
				delete tmpRow.HMDrag_sort;
				this.$emit('onclick', {
					index: index,
					row: JSON.parse(JSON.stringify(tmpRow))
				});
			},
			change(e) {
				//  
				e.moveRow = this.getMoveRow(e.index);
				// 清除组件临时赋予的id
				delete e.moveRow.HMDrag_id;
				delete e.moveRow.HMDrag_sort;
				this.$emit('change', e);
			},
			sort(e) {

				this.stopScroll();
				this.isHoldTouch = false;
				let moveRow = this.getMoveRow(e.index);
				// 检测清除临时id和sort
				delete moveRow.HMDrag_id;
				delete moveRow.HMDrag_sort;

				let list = JSON.parse(JSON.stringify(this.dragList));
				let tmpList = [];
				for (let i = 0, len = list.length; i < len; i++) {
					// 检测清除临时id和sort
					delete list[i].HMDrag_id;
					delete list[i].HMDrag_sort;
					let index = e.sortArray[i];
					this.dragList[i].HMDrag_sort = index;
					tmpList[index] = list[i];
				}
				// 触发组件confirm 并传递数据
				this.$emit('confirm', {
					list: tmpList,
					index: e.index,
					moveTo: e.offset,
					moveRow: moveRow
				});

			},
			getNowList() {

				let list = JSON.parse(JSON.stringify(this.dragList));
				let tmpList = [];
				for (let i = 0, len = list.length; i < len; i++) {
					let tmpSotr = list[i].HMDrag_sort;
					tmpList[tmpSotr] = list[i];
					// 检测清除临时id和sort
					delete tmpList[tmpSotr].HMDrag_id;
					delete tmpList[tmpSotr].HMDrag_sort;
				}
				return tmpList;
			},
			splice() {

				let deleteIndex = arguments[0];
				let deleteLength = arguments[1];
				let len = arguments.length;
				let waitPushList = [];
				for (let i = 2; i < len; i++) {
					let newRow = arguments[i]
					newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
					newRow.HMDrag_sort = deleteIndex + i - 2;
					waitPushList.push(newRow);
				}
				let minDeleteSort = deleteIndex;
				let maxDeleteSort = deleteLength > 0 ? deleteIndex + deleteLength - 1 : deleteIndex;
				let offsetSort = waitPushList.length - deleteLength;
				let deleteIndexArray = [];

				for (let i = this.dragList.length - 1; i >= 0; i--) {
					let row = this.dragList[i];
					let rowSort = row.HMDrag_sort;
					// 跳过
					if (rowSort < minDeleteSort) {
						continue;
					}
					// 删除
					if (deleteLength > 0 && rowSort >= minDeleteSort && rowSort <= maxDeleteSort) {
						this.dragList.splice(i, 1);
						continue;
					}
					if (offsetSort != 0 && rowSort >= maxDeleteSort) {
						let newSort = rowSort + offsetSort;
						this.dragList[i].HMDrag_sort = newSort;

					}
				}
				this.dragList.push(...waitPushList);
				this.pushNewSort();

				let list = JSON.parse(JSON.stringify(this.dragList));
				let tmpList = this.getNowList();
				return tmpList;
			},
			push() {

				let len = arguments.length;
				let waitPushList = [];
				let startSotr = this.dragList.length;
				for (let i = 0; i < len; i++) {
					let newRow = arguments[i]
					newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
					newRow.HMDrag_sort = startSotr + i;
					waitPushList.push(newRow);
				}
				this.dragList.push(...waitPushList);
				this.pushNewSort();
				let tmpList = this.getNowList();
				return tmpList;
			},
			unshit() {

				let len = arguments.length;
				let waitPushList = [];
				for (let i = 0; i < len; i++) {
					let newRow = arguments[i]
					newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
					newRow.HMDrag_sort = i;
					waitPushList.push(newRow);
				}
				for (let i = this.dragList.length - 1; i >= 0; i--) {
					let row = this.dragList[i];
					let rowSort = row.HMDrag_sort;
					let newSort = rowSort + len;
					this.dragList[i].HMDrag_sort = newSort;
				}
				this.dragList.push(...waitPushList);
				this.pushNewSort();
				let tmpList = this.getNowList();
				return tmpList;
			},
			pushNewSort() {

				let sortArray = [];
				for (let i = 0, len = this.dragList.length; i < len; i++) {
					sortArray.push(this.dragList[i].HMDrag_sort);
				}
				this.pushWxsData('sortArray', sortArray);
				this.pushWxsData('lastInitTime', (new Date()).valueOf());
			},
			pushWxsData(key = null, val = null) {

				this.wxsDataObj.splice(0, 8, ['guid', this.guid],
					['listLength', this.dragList.length],
					['ListHeight', this.ListHeight],
					['isAppH5', this.isAppH5],
					['longTouch', this.longTouch],
					['longTouchTime', this.longTouchTime],
					['feedbackGenerator', this.feedbackGenerator],
					['autoScroll', this.autoScroll]);
				let index = -1;
				let sotrArrayIndex = -1;
				for (let i = 0; i < this.wxsDataObj.length; i++) {
					if (this.wxsDataObj[i][0] == key) {
						index = i;
						break;
					}
				}
				if (index > -1) {
					this.wxsDataObj[index][1] = val;
					if (key == 'sortArray') {
						sotrArrayIndex = index;
					}
				} else {
					this.wxsDataObj.push([key, val]);
					if (key == 'sortArray') {
						sotrArrayIndex = this.wxsDataObj.length - 1;
					}
				}

				if (this.guid == "") {
					return;
				}
				this.wxsDataStr = JSON.stringify(this.wxsDataObj);
			},
			compareVersion(v1, v2) {

				v1 = v1.split('.')
				v2 = v2.split('.')
				const len = Math.max(v1.length, v2.length)

				while (v1.length < len) {
					v1.push('0')
				}
				while (v2.length < len) {
					v2.push('0')
				}
				for (let i = 0; i < len; i++) {
					const num1 = parseInt(v1[i])
					const num2 = parseInt(v2[i])

					if (num1 > num2) {
						return 1
					} else if (num1 < num2) {
						return -1
					}
				}
				return 0
			}

		}
	}
</script>

<style lang="scss" scoped>
	//默认
	$row-background-color: #fff;
	$border-color :#c8c7cb;
	$shadow-color-moveing :rgba(0, 0, 0, 0.1);
	//Dark模式
	$Dark-row-background-color: #000;
	$Dark-border-color :#3d3d40;
	$Dark-shadow-color-moveing :rgba(0, 0, 0, 0.5);

	//字体图标 拖拽图标
	@font-face {
		font-family: "HM-DS-font";
		src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
	}

	.iconfont {
		font-family: "HM-DS-font" !important;
		font-style: normal;

		&.icon-drag {
			&:before {
				content: "\e6e4";
			}
		}

	}

	// 定义颜色 start
	//默认颜色
	.color,
	.rowBox-shadow {
		&.scroll-view {
			border-bottom: 1rpx $border-color solid;
			border-top: 1rpx $border-color solid;
		}

		.hm-row-shadow,
		.hm-row {
			.modules {
				background-color: #f8f8f8;
				padding: 10rpx 20rpx;

				.row-content {


					.row {
						// border-bottom: solid 5rpx $border-color;
						background-color: $row-background-color;
					}
				}

				.drag-content {
					.drag-icon {
						background-color: $row-background-color;
					}
				}
			}

			&.move {
				box-shadow: 0 1px 5px $shadow-color-moveing;
			}
		}

	}

	// 暗黑模式
	@media (prefers-color-scheme: dark) {

		//Dark模式
		.color .rowBox-shadow {
			&.scroll-view {
				border-bottom: 1rpx $Dark-border-color solid;
				border-top: 1rpx $Dark-border-color solid;
			}

			.hm-row-shadow,
			.hm-row {
				.modules {
					.row-content {
						.row {
							border-bottom: solid 1rpx $Dark-border-color;
							background-color: $Dark-row-background-color;
						}
					}

					.drag-content {
						.drag-icon {
							border-bottom: solid 1rpx $Dark-border-color;
							background-color: $Dark-row-background-color;
						}
					}
				}

				&.move {
					box-shadow: 0 1px 5px $Dark-shadow-color-moveing;
				}
			}
		}
	}

	// 定义颜色 end 
	.HM-drag-sort {
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;

		.scroll-view {
			box-sizing: border-box;
		}

		.rowBox,
		.rowBox-shadow {
			width: 100%;

			.hm-row-shadow,
			.hm-row {
				display: flex;
				flex-direction: row;
				width: 100%;

				.modules {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					box-sizing: border-box;

					.row-content {
						width: 100%;
						flex-shrink: 1;

						.row {
							display: flex;
							align-items: center;
							padding-left: 12px;

							box-sizing: border-box;

							.icon {
								width: 30px;
								height: 30px;
								border-radius: 6px;
								margin-right: 13px;
							}

							.text {
								font-size: 13px;
							}
						}
					}

					.drag-content {
						height: 100%;
						flex-shrink: 0;

						.drag-icon {
							height: 100%;
							width: 50px;
							display: flex;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;

							.iconfont {
								font-size: 22px;
								color: #c7c7cb;
							}
						}
					}
				}
			}

			.hm-row-shadow {

				&.move {
					opacity: 0.8;

					view {
						border-bottom-width: 0;
					}
				}
			}

			.hm-row {
				opacity: 1;

				&.hide {
					opacity: 0;
				}

				&.ani {
					transition: transform 0.2s;
					-webkit-transition: transform 0.2s;
				}
			}

			&:last-child {
				.hm-row {
					view {
						border-bottom-width: 0;
					}
				}
			}
		}

		.rowBox-shadow {
			position: absolute;
			z-index: 100;
			display: none;

			&.show {
				display: flex !important;
			}

			&.hide {
				display: none !important;
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			// transform-style:preserve-3d;
		}

	}

	.view-cell-bg-zy2-1 {
		display: flex;
		align-items: center;

		.zy2-info {
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			width: 400rpx;

			.zy2-title {
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.zy2-remake {
				font-weight: 400;
				color: #464646;
				font-size: 24rpx;
			}
		}
	}

	.view-cell-bg1 {
		// 	background: linear-gradient(180deg, #FFECE7 0%, #FFFFFF 20%);
		height: 260rpx;
		margin: 10rpx 0rpx;
		box-sizing: border-box;
		position: relative;

		.icon-index-3 {
			position: absolute;
			top: 4rpx;
		}
	}

	.text-college-name {
		color: #464646;
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 5rpx;
		box-sizing: border-box;
	}

	.text-majors-left {
		color: #464646;
		font-size: 20rpx;
		margin-top: 10rpx;
	}

	.text-464646 {
		color: #464646;
		font-size: 24rpx;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		width: 100%;
		line-height: 24rpx;
	}

	.text-majors-name {
		color: #464646;
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 25rpx;
		box-sizing: border-box;
	}

	.view-cell-line {
		height: 4rpx;
		background-color: #f8f8f8;
		width: 100%;
		border-radius: 2rpx;
		margin-top: 30rpx;
	}

	.topleft {
		width: 80rpx;
		margin-top: 70rpx;
		padding-left: 10rpx;
	}

	.majortitle {
		display: flex;
		flex-direction: column;

	}

	.majortitle2 {
		display: flex;
		align-items: center;

	}

	/**
	 * 重写排序item样式start
	 */
	.view-bg-type-3 {
		// height: 260rpx;
		height: 100%;
		width: 80vw;

		&>view {
			display: flex;
		}

		.item-left {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			.new-icon-index {
				position: relative !important;
				left: 0 !important;
			}

			.scale {

				.number-text {
					font-size: 28rpx;
					font-weight: 700;
					display: inline-block;
				}

				text {
					font-size: 20rpx;
					font-weight: 500;
				}
			}
		}

		.item-content {
			flex: 6;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap: 20rpx;

			.content-name-title,
			.info-title,
			{
			font-weight: 700;
		}

		.content-info {
			margin-bottom: 20rpx;
		}

		.item-remake {
			color: #464646;
			font-size: 24rpx;
			display: block;
			margin-top: 10rpx;
		}
	}
	}

	/**
	 * 重写end
	 */

	@media screen and (min-width: 580px) and (max-width: 1024px) {
		.view-cell-bg1 {
			height: 300rpx;
			margin-top: 140rpx;
		}

		.text-majors-name {
			margin-top: 0rpx;
		}

		.content-info {
			margin-bottom: 0rpx;
		}

		.view-bg-type-3 {

			.item-font {
				font-size: 22rpx;
			}

			.item-remake {
				font-size: 18rpx !important;
				line-height: 22rpx;
				// margin-top: 5px !important;
			}
		}

		.view-cell-bg-zy2-1 {

			.zy2-info {
				font-size: 24rpx;

				.zy2-title {
					font-weight: 600;
					margin-bottom: 10rpx;
				}

				.zy2-remake {
					font-weight: 400;
					color: #464646;
					font-size: 18rpx;
				}
			}
		}
	}
</style>